<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <script src="../js/ajax.js"></script>
    <link rel="shortcut icon" href="../img/1.ico" />
    <link rel="stylesheet" href="../css/zhice.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    
  </head>
  <body>
        <!-- 头部开始 -->
        <div class="Bigbox">
          <div class="box">
              <ul class="nav">
                  <li>
                      <a href="#" id="a1"><span id="a3">马来西亚</span><i class="iconfont icon-xiala"></i></a>
                      <ul>
                          <li>
                              <a href="">全球</a>
                          </li>
                          <li>
                              <a href="">中国大陆</a>
                          </li>
                          <li>
                              <a href="">中国香港</a>
                          </li>
                          <li>
                              <a href="">中国澳门</a>
                          </li>
                          <li>
                              <a href="">中国台湾</a>
                          </li>
                          <li>
                              <a href="">新家坡</a>
                          </li>
                          <li>
                              <a href="">韩国</a>
                          </li>
                          <li>
                              <a href="">马来西亚</a>
                          </li>
                          <li>
                              <a href="">澳大利亚</a>
                          </li>
                          <li>
                              <a href="">新西兰</a>
                          </li>
                          <li>
                              <a href="">加拿大</a>
                          </li>
                          <li>
                              <a href="">日本</a>
                          </li>
                          <li>
                              <a href="">越南</a>
                          </li>
                          <li>
                              <a href="">泰国</a>
                          </li>
                          <li>
                              <a href="">菲律宾</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <a href="denglu.html" id="a">亲，请登录</a>
                  </li>
                  <li>
                      <a href="zhuce.html">免费注册</a>
                  </li>
                  <li>
                      <a href="#">手机逛淘宝</a>
                  </li>
                  <li>
                      <a href="#">网页无障碍</a>
                  </li>
              </ul>
  
              <ul class="nav" id="nav">
                  <li>
                      <a href="#" id="a1">我的淘宝
                          <i class="iconfont icon-xiala"></i>
                      </a>
                      <ul id="Ul">
                          <li>
                              <a href="">已买到的宝贝</a>
                          </li>
                          <li>
                              <a href="">我的足迹</a>
                          </li>
                      </ul>
                  </li>
                  <li>
                      <a href="#"><span class="iconfont icon-gouwuche-tianchong"></span>购物车</a>
                  </li>
                  <li>
                      <a href="#" id="a2"><span class="iconfont icon-shoucang"></span>收藏夹<i
                              class="iconfont icon-xiala"></i></a>
                      <ul id="Ul">
                          <li>
                              <a href="">收藏的宝贝</a>
                          </li>
                          <li>
                              <a href="">收藏的店铺</a>
                          </li>
                      </ul>
  
                  </li>
                  <li>
                      <a href="#
                      " id="a4">商品分类</a>
                  </li>
                  <li>
                      <a href="#" id="a5">免费开店</a>
                  </li>
                  <i id="i">|</i>
                  <li id="a1-1">
                      <a href="" id="a1">千牛买卖家中心<i class="iconfont icon-xiala"></i></a>
                      <ul id="Ul1">
                          <li>
                              <a href="">开店入驻</a>
                          </li>
                          <li>
                              <a href="">已卖出的宝贝</a>
                          </li>
                          <li>
                              <a href="">出售中的宝贝</a>
                          </li>
                          <li>
                              <a href="">卖家服务市场</a>
                          </li>
                          <li>
                              <a href="">卖家培训中心</a>
                          </li>
                          <li>
                              <a href="">体验中心</a>
                          </li>
                          <li>
                              <a href="">电商学习中心</a>
                          </li>
                      </ul>
                  </li>
                  <li id="a1-2">
                      <a href="" id="a1">联系客服<i class="iconfont icon-xiala"></i></a>
                      <ul id="Ul">
                          <li>
                              <a href="">消费者客服</a>
                          </li>
                          <li>
                              <a href="">卖家客服</a>
                          </li>
                      </ul>
                  </li>
              </ul>
          </div>
      </div>
      <!-- 第二部分开始 -->
      <div class="header">
          <div class="header-a">
              <h1><img src="../img/taobao1.jpg" alt="" /></h1>
              <p>用户注册</p>
          </div>
      </div>
      <div class="reg">
          <div class="reg-a">
              <div class="reg-b">
                  <p>
                    手机号码
                    <input type="text" name="" id="unIpt" placeholder="请输入你的手机号" />
                    <span></span>
                    <br />
                  </p>
                  <p>
                    验证码
                    <input type="password" name="" id="pwIpt" placeholder="请输入密码" />
                    <span></span>
                    <br />
                  </p>
                  <div class="reg-dd">
                    <button id="btn">注册</button>
                  </div>
                  <p class="reg-e">
                    <span><input type="text" id="in"></span>
                      已阅读并同意以下协议<a href="">淘宝平台服务协议</a>,<a href="">隐私权<br>限政策</a
              >, <a href="">法律声明</a>,<a href="">支付宝及客户端协议</a>
                  </p>
                  <p id="qie">
                    <a href="">
                      切换成企业账户注册
                    </a>
                    
                  </p>
              </div>
          </div>
      </div>
      <!-- 底部开始 -->
      <div class="footer">
          <div class="footer-a">
              <ul class="footer-b">
                  <li><a href="#">阿里巴巴集团</a><span>|</span></li>
                  <li><a href="#">阿里巴巴国际站</a><span>|</span></li>
                  <li><a href="#">阿里巴巴中国站</a><span>|</span></li>
                  <li><a href="#">全球卖通</a><span>|</span></li>
                  <li><a href="#">淘宝网</a><span>|</span></li>
                  <li><a href="#">天猫</a><span>|</span></li>
                  <li><a href="#">聚划算</a><span>|</span></li>
                  <li><a href="#">一淘</a><span>|</span></li>
                  <li><a href="#">阿里妈妈</a><span>|</span></li>
                  <li><a href="#">阿里云计算</a><span>|</span></li>
                  <li><a href="#">云OS</a><span>|</span></li>
                  <li><a href="#">万网</a><span>|</span></li>
                  <li><a href="#">支付宝</a></li>
              </ul>
              <p class="footer-d">
                  <a href="//www.taobao.com/about">关于淘宝</a>
                  <a href="//www.taobao.com/about/partners.php">合作伙伴</a>
                  <a href="//pro.taobao.com">营销中心</a>
                  <a href="//service.taobao.com/support/main/service_route.htm">联系客服</a
            >
            <a href="//open.taobao.com">开放平台</a>
                  <a href="//www.taobao.com/about/join.php">诚征英才</a>
                  <a href="//consumerservice.taobao.com/contact-us">联系我们</a>
                  <a href="//www.taobao.com/sitemap.php">网站地图</a>
                  <a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a
            >
            <span>&copy; 2021 Taobao.com 版权所有</span>
          </p>
          <p class="footer-c">
            <span> 网络文化经营许可证：</span
            ><a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg"
              >文网文[2010]040号</a
            >
            <span>|</span>
            <span>增值电信业务经营许可证：浙B2-20080224-1</span>
            <span>|</span>
            <span>信息网络传播视听节目许可证：1109364号</span>
          </p>
        </div>
      </div>
    <script>
      let focusTipText = "6-18个字符，可使用数字字母下划线组成，必须字母开头";
      // 记录输入框的状态
      let isUsername = false;
      let isPassword = false;

      let unIpt = document.querySelector("#unIpt");
      unIpt.onblur = function () {
        //   失去焦点
        // 输入框的内容
        let username = unIpt.value;
        let usernameReg = /^[a-zA-Z]\w{5,17}$/;
        if (usernameReg.test(username)) {
          //满足正则
          //   2-2 发起ajax请求
          let checkUsernameAPI =
            "http://jx.xuzhixiang.top/ap/api/checkname.php?username=" +
            username;
          let xhr = new XMLHttpRequest();
          xhr.open("get", checkUsernameAPI);
          xhr.send();
          xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
              let obj = JSON.parse(xhr.responseText);
              console.log(obj);
              if (obj.code == 1) {
                //   提示内容 给span
                console.log(this); //xhr   this报错了， this不是unIPt -- 使用unIpt变量
                console.log(unIpt.nextElementSibling); //undefined
                this.nextElementSibling.innerHTML = obj.msg;
                this.nextElementSibling.style.color = "green";
                isUsername = true;
              } else {
                this.nextElementSibling.innerHTML = obj.msg;
                this.nextElementSibling.style.color = "red";
                isUsername = false;
              }
            }
          };
        } /* else {
          //不满足正则
          this.nextElementSibling.innerHTML = "格式必须是：" + focusTipText;
          this.nextElementSibling.style.color = "red";

          isUsername = false;
        } */
      };

      unIpt.onfocus = function () {
        //   获取焦点
        this.nextElementSibling.innerHTML = focusTipText;
        this.nextElementSibling.style.color = "gray";
      };

      // -3  验证密码格式是否正确
      let pwIpt = document.querySelector("#pwIpt");
      pwIpt.onblur = function () {
        //失去焦点的时候验证  密码
        let reg = /^\S{3,18}$/;
        if (reg.test(pwIpt.value)) {
          pwIpt.nextElementSibling.innerHTML = "√";
          pwIpt.nextElementSibling.style.color = "green";
          isPassword = true;
        } else {
          pwIpt.nextElementSibling.innerHTML = "密码只能是 3-18非空字符";
          pwIpt.nextElementSibling.style.color = "#808080";
          isPassword = false;
        }
      };
      let btn = document.querySelector("#btn");
      btn.onclick = function (evt) {
        evt.preventDefault();

        if (isUsername && isPassword) {
          //发起注册请求
          // 注册接口
          let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
          let data = { username: unIpt.value, password: pwIpt.value };
          console.log(data);
          ajax({
            url: regAPI,
            data: data,
            success(r) {
              console.log(r);
              alert(r.msg);
              if (r.code == 1) {
                // 注册成功 跳转到登录
                location.href = "../html/denglu.html";
              }
            },
            failed() {},
          });
        } else {
        }
      };
      /* let put = document.querySelector('#unIpt')
    put.style.outlineColor = 'back';
    let put1 = document.querySelector('#pwIpt')
    put1.style.outlineColor = 'pink'; */
    </script>
  </body>
</html>
